<script>
import GlobalFilterListener from '@/views/visual-screen/components/GlobalFilterListener.vue'
const ds = [
  '江铜龙昌精密铜管有限公司',
  '南昌福德隆实业有限公司',
  '江西赣江海螺水泥有限责任公司',
  '江西赣江海螺水泥有限责任公司',
  '江西制药有限公司',
]
export default {
  name: 'focus-on-enterprises',
  mixins: [GlobalFilterListener],
  data () {
    return {
      data: []
    }
  },
  mounted () {
    this.rand()
  },
  methods: {
    rand () {
      ds.sort(() => Math.random() - 0.5)
      this.data = ds
    },
    eventBusHandler () {
      this.rand()
    },
  }
}
</script>

<template>
  <div class="block-item">
    <div class="flex align-center item-head">
      <svg-icon class="item-icon" name="gift"></svg-icon>
      <div class="head-title">
        <h3 class="primary-title">重点关注企业</h3>
        <p class="secondary-title">Focus on enterprises</p>
      </div>
    </div>
    <div class="item-body">
      <div class="item-content">
        <table class="content-table">
          <thead>
            <tr>
              <th>关注指标</th>
              <th>标杆企业</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>用电量</th>
              <td>{{data[0]}}</td>
            </tr>
            <tr>
              <th>用煤量</th>
              <td>{{data[1]}}</td>
            </tr>
            <tr>
              <th>综合能耗</th>
              <td>{{data[2]}}</td>
            </tr>
            <tr>
              <th>工业总产值</th>
              <td>{{data[3]}}</td>
            </tr>
            <tr>
              <th>万元产值综合能耗</th>
              <td>{{data[4]}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<style scoped>
.content-table {
  width: 100%;
  border-spacing: 0;
}
.content-table td,
.content-table th {
  border-right: 1px solid #024287;
  border-bottom: 1px solid #024287;
  padding: 8px 10px;
}
tr th:first-child {
  border-left: 1px solid #024287;
}
thead tr:first-child th {
  border-top: 1px solid #024287;
}
.content-table th {
  color: #3b67ac;
}
.content-table td {
  color: #03c0ff;
}
</style>
